import { Component, OnInit } from '@angular/core';
// 引入
import { Observable, Subject } from 'rxjs';
import {
  debounceTime, distinctUntilChanged, switchMap
} from 'rxjs/operators';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';


@Component({
  selector: 'app-hero-search',
  templateUrl: './hero-search.component.html',
  styleUrls: ['./hero-search.component.css']
})
export class HeroSearchComponent implements OnInit {
  // $表明 heroes$ 是一个 Observable，而不是数组。
  heroes$: Observable<Hero[]>;
  private searchTerms = new Subject<string>();

  constructor(private heroService: HeroService) { }

  // 每次输入框里面一变动，数据 就会传递到这里来
  // Push a search term into the observable stream.
  // 将 搜索项 推入 可观察流。
  search(term: string): void {
    this.searchTerms.next(term); // 调用它的 next(value) 方法往 Observable 中推送一些值
  }

  ngOnInit() {
    this.heroes$ = this.searchTerms.pipe(
      // wait 300ms after each keystroke before considering the term
      // 每次击键300毫秒后再考虑这个 term
      debounceTime(300),
 
      // ignore new term if same as previous term
      // 如果新术语与前一术语相同，则忽略新术语
      distinctUntilChanged(),// 会确保只在过滤条件变化时才发送请求。
 
      // switch to new search observable each time the term changes
      // 每次术语改变时，切换到新的可观察到的搜索
      // switchMap() 会为每个从 debounce 和 distinctUntilChanged 中通过的搜索词调用搜索服务。 它会取消并丢弃以前的搜索可观察对象，只保留最近的。
      switchMap((term: string) => this.heroService.searchHeroes(term)),
      
    );
  }

}
